<template>
    <div class="an-page-children an-sys">
        <van-nav-bar
            title="设置"
            left-text=""
            left-arrow
            @click-left="clickBack"
            />

        <div class="an-marg">
            <van-cell-group>
                <van-cell title="用户名" :value="userInfo.username" />
                <van-cell title="邮箱" :value="userInfo.email"/>
                <van-cell title="手机号" :value="userInfo.phone"/>
            </van-cell-group>
        </div>

        <div class="an-pad">
            <van-button type="default" block plain @click="loginOut">退出</van-button>
        </div>


    </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  computed: mapState(['userInfo']),
  methods:{

    loginOut() {
      this.$store.dispatch('loginOut');
      this.clickBack();
    },

    clickBack() {
      this.$router.go(-1);
    }
  }
};
</script>

<style lang="scss" scoped>
.an-sys{
    .an-marg{
        margin: 10px 0;
    }
    .an-pad{
        padding: 15px;
    }
}
</style>